<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

<script>
  // 1.没有块级作用域引起的问题：for的块级
  //为什么闭包可用解决问题：函数是一个作用域
  var btns = document.getElementsByTagName('button')
  for (var i=0; i<btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击')
    })
  }

  //1.情况一：ES5中没有使用闭包(错误的方式)
  // i = 0
  // { 
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { 
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { 
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  //2.情况二：ES5中使用闭包
  // var btns = document.getElementsByTagName('button')
  // for (var i=0; i<btns.length; i++) {
  //   (function (i) {
  //     btns[i].addEventListener('click', function () {
  //       console.log('第' + i + '个按钮被点击')
  //     })
  //   })(i)
  // }  

  // function (i) {//i = 0
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // function (i) {//i = 1
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // function (i) {//i = 2
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  //ES6中let
  var btns = document.getElementsByTagName('button')
  for (let i=0; i<btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击')
    })
  }

  // { i = 0
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { i = 1
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { i = 2
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { i = 3
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }

  // { i = 4
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击')
  //   })
  // }
</script>

</body>
</html>